<template>
  <div class="home-page">
    <header>
      <span>首页</span>
      <van-sticky>
        <div class="search">
          <van-search v-model="searchValue" shape="round" background="#ff9c6e" placeholder="展览演出、城市"
            @search="onSearch" />
        </div>
      </van-sticky>
    </header>
    <div class="banner">
      <div class="bgbox"></div>
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
          <img :src="image" :style="{ width: '100%', height: '100%' }" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="cart-list">
      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" :immediate-check="false"
        @load="onLoad">
        <van-card v-for="item in showList" :key="item.id" :price="formatMoney(item.price_low) + '起'"
          :desc="'2023.' + (item.end_time + '&nbsp;' + item.district_name + '&nbsp;' + item.venue_name)"
          :title="item.project_name" :thumb="baseURL + item.cover" @click-thumb="jumpToDetail(item.id)">
          <template #bottom>
            <span>{{ item.required_number }}人想去</span>
          </template>
          <template #num>
            <van-icon name="shopping-cart-o" color="#fa541c" size="24" @click="handleAddToCart(item)" />
          </template>
        </van-card>
      </van-list>
    </div>
  </div>
</template>

<script setup  >
import { onMounted, ref } from 'vue'
import { getShowListApi } from '../../apis/homeApi'
import { useRouter } from 'vue-router'
import useCartStore from '../../store/cart'
import { Toast } from 'vant'
import { baseURL } from '../../apis/Ajax'
const searchValue = ref('')
const images = [
  'http://www.shuiyue.info:15666/show-image/bilibili_list/Knx66Wjs1646909895125.jpeg',
  'http://www.shuiyue.info:15666/show-image/bilibili_list/1MRbBOvx1646131705755.jpeg',
  'http://www.shuiyue.info:15666/show-image/bilibili_list/ozXSAxjJ1646122117249.jpeg',
  'http://www.shuiyue.info:15666/show-image/bilibili_list/xA8PyVru1646131754214.png',

]
const showList = ref([])
const loading = ref(false)
const finished = ref(false)
const router = useRouter()
const store = useCartStore()

/**
 * 搜索商品
 * @param {string} val 
 */
function onSearch(val) {
  showList.value = showList.value.filter((it, i) => it.project_name.includes(val))
  //  searchValue.value = ''
}
/**
 * 格式化商品金额
 * @param {number} val 
 */
function formatMoney (val){
  return (Number(val) / 100).toFixed(2)
}

/**
 * 获取演出列表数据
 */
onMounted(async function () {
  const result = await getShowListApi({ page: 1, size: 10 })
  showList.value = result.data.rows
  console.log(result)
  console.log(showList.value)
})

/**
 * 触底加载更多
 */
const onLoad = async () => {
  loading.value = true
  const result = await getShowListApi({ page: 2, size: 15 })
  showList.value.push(...result.data.rows)
  loading.value = false
  finished.value = true

}

/**
 * 加入购物车
 * @param {object} item 
 */
function handleAddToCart(item) {
  // console.log(item)
  let { id, price_low, venue_name, cover, project_name
  } = item
  price_low = formatMoney(price_low)
  const currentProduct = {
    id,
    project_name,
    cover,
    venue_name,
    price_low,
    amount: 1,
    checked: false,
  }
  // console.log(currentProduct)
  // 仓库调用加入购物车的方法
  store.addToCart(currentProduct)
  Toast.success('加入购物车成功!')
  console.log(store.cart)
}

/**
 * 跳转到详情页
 * @param {string} id 
 */
function jumpToDetail(id) {
  router.push({
    path: '/detail',
    query: {
      id
    }
  })
}
</script>

<style  scoped   lang="less">
@import '../../style/common.less';

.home-page {
  display: block;
  position: relative;
  height: 100%;

  >header {
    height: 102px;
    color: @g00;
    font-size: .9rem;
    text-align: center;

    >span {
      display: block;
      background-image: linear-gradient(to top, @c03, @c05);
      height: 48px;
      width: 100%;
      line-height: 48px;
      border-bottom: 1px solid @g00;

    }

    >.search {
      height: 54px;
    }
  }

  >.banner {
    position: relative;
    width: 100%;
    height: 230px;
    padding-top: 10px;

    >.bgbox {
      width: 100%;
      height: 130px;
      background-image: linear-gradient(to top, @c00, @c01, @c02, @c03);
      position: absolute;
      top: -1px;
      left: 0;
    }

    // background: @c03;
    >.van-swipe {
      width: 340px;
      height: 200px;
      z-index: 9;
      margin: auto;

      .van-swipe__track {
        width: 340px;
        height: 240px;
      }

      >.van-swipe-item {
        width: 360px;
        height: 240px;
      }
    }
  }
}
</style>
